<template>
  <q-scroll-area style="height: 550px; max-width: 300px">
    <div class="topo-property q-gutter-y-md" @mousedown.stop>
    <q-card>
      <q-tabs
        v-model="tabValue"
        dense
        class="text-grey"
        active-color="primary"
        indicator-color="primary"
        align="justify"
        narrow-indicator
      >
        <q-tab name="property-project" label="图纸" />
        <q-tab name="property-component" label="组件" />
      </q-tabs>
      <q-separator />
      <q-tab-panels v-model="tabValue" animated>
        <q-tab-panel name="property-project">
          <ProjectInfo/>
        </q-tab-panel>

        <q-tab-panel name="property-component" v-if="!isObjectEmpty(selectedComponent)">
          <ComponentItemInfo/>
        </q-tab-panel>

      </q-tab-panels>
    </q-card>
  </div>
  </q-scroll-area>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, watch } from 'vue';
import ProjectInfo from 'layouts/ProjectInfo.vue';
import ComponentItemInfo from 'layouts/ComponentInfo.vue';
import { useEditorStore } from 'stores/editorStore';
import { storeToRefs } from 'pinia';
import { isObjectEmpty } from 'src/util/utils.js'


export default defineComponent({
  name: 'HmiProperty',
  components: {
    ProjectInfo,
    ComponentItemInfo
  },
  setup (props, context) {
    //store
    const store = useEditorStore();
    const {
      canvas,
      selectedComponent
    } = storeToRefs(store);

    // 响应式数据解构
    const tabValue = ref('property-project');

    //监视选择项变化
    watch(() => selectedComponent, () => {
      if (selectedComponent.value) {
        tabValue.value = 'property-component';
      } else {
        tabValue.value = 'property-project';
      }
    }, { deep: true });

    //挂载
    onMounted(() => {

    });

    return {
      tabValue,

      canvas,
      selectedComponent,
      isObjectEmpty
    }
  }
});
</script>

<style lang="scss" scoped>
.topo-property{
  .q-tab-panel { //q-tab-panel
    margin: 0px;
    padding: 0px;
  }
}
</style>
